  <!DOCTYPE html>
<html>
	<head>
		<title>SubRows in DataTable - API</title>
		<link rel="stylesheet" href="../../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../../common/samples.css">
		<script src="../../common/testdata.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
        .multiline{
            line-height: 30px !important;
        }
        </style>
	</head>
	<body>
		<div class='header_comment'>Sub-rows in DataTable, API</div>
		<div id="testA"></div>
		<div id="testB"></div>

		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			webix.ui({
				container:"testA",
				view:"datatable", id:"dt1",
				subrow:"#details#",
				columns:[
					{ id:"title",	header:"Title", 
						template:"{common.subrow()} #title#", width:220 },
					{ id:"year",	header:"Year", 		width:100, sort:"int"},
					{ id:"votes",	header:"Votes", 	width:100,	sort:"int"}
				],
				subRowHeight:"auto",
				autoheight:true,
				autowidth:true,
				data:[
					{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, 
						details:"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text "},
					{ id:2, title:"The Godfather", year:1972, votes:511495, 
						details:""},
					{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, 
						details:"Short text"}
				]
			});	

			$$("dt1").openSub("1");

			webix.ui({
				width:600,
				container:"testB",
				cols:[
					{ view:"button", value:"Open", click:function(){
						$$("dt1").openSub("1");
					}},
					{ view:"button", value:"Close", click:function(){
						$$("dt1").closeSub("1");
					}},
					{ view:"button", value:"Set small content", click:function(){
						$$("dt1").getItem("1").details = "One line";
						$$("dt1").refresh()
					}},
					{ view:"button", value:"Set big content", click:function(){
						$$("dt1").getItem("1").details = "One line<br>Second line";
						$$("dt1").refresh()
					}},
				]
			})
		});		
		</script>
	</body>
</html>